<!--  -->
<template>
  <div class="box">
      <div class="title">
      <span>基本信息</span>
      
    </div>
    <div class="container">
      <div class="itemBox">
        <div class="line">
          <div>机构号</div>
          <div>{{datainfo.instNo}}</div>
        </div>
        <div class="line">
          <div>机构名</div>
          <div>{{datainfo.instName}}</div>
        </div>
        <div class="line">
          <div>支付回调地址</div>
          <div>{{datainfo.payNotifyUrl}}</div>
        </div>
        <div class="line">
          <div>key</div>
          <div>{{datainfo.token}}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>机构角色类型</div>
          <div v-if="datainfo.instType == 1">平台</div>
          <div v-if="datainfo.instType == 2">一级代理</div>
          <div v-if="datainfo.instType == 3">二级代理</div>
          <div v-if="datainfo.instType == 4">业务员</div>
          <div v-if="datainfo.instType == 5">商户</div>
        </div>
        <div class="line">
          <div>创建时间</div>
          <div>{{datainfo.createTime}}</div>
        </div>
        <div class="line">
          <div>商户回调地址</div>
          <div>{{datainfo.mchNotifyUrl}}</div>
        </div>
      </div>
    </div>

     <div class="title">
      <span>额度详情</span>
      <div>
        <el-button type="primary" @click="visible = true">调额</el-button>
      </div>
    </div>
     <div class="container">
         <div class="bar">
              <schart :canvasId="canvasId"
              class="pic"
                :type="type"
                :data="data"
                :options="options"
            >
            </schart>
         </div>
         <div class="allbox">
             <div>当前总额度：{{datainfo.all_limit}}</div>
             <div>限额比例：{{datainfo.limitRatio/10}}‰</div>
         </div>
     </div>

      <!-- 充值记录 -->
    <div class="title">
      <span>充值记录</span>
    </div>
    <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="chargeOrderPagelist"
          tooltip-effect="dark"
          style="width: 95%;margin: 0 auto;"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
           <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column prop="tradeTime" align="center" label="时间"></el-table-column>
          <el-table-column prop="tradeAmount" align="center" label="充值类型">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 1">初始额度</div>
              <div v-if="scope.row.type == 2">扫码充值</div>
              <div v-if="scope.row.type == 3">手动提额</div>
            </template>
          </el-table-column>
          <el-table-column prop="tradeAmount" align="center" label="充值金额(元)">
            <template slot-scope="scope">{{(scope.row.tradeAmount/100).toFixed(2)}}</template>
          </el-table-column>
          <el-table-column prop="tradeRatio" align="center" label="充值比例(‰)">
           <template slot-scope="scope">{{(scope.row.tradeRatio/10).toFixed(1)}}</template>
          </el-table-column>
          <el-table-column prop="instLimitAdd" align="center" label="新增额度">
            <template slot-scope="scope">{{(scope.row.instLimitAdd/100).toFixed(2)}}</template>
          </el-table-column>
         
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template>
              <el-button type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
            :current-page.sync="cur_page"
          ></el-pagination>
        </div>
    </div>


     <!-- 调额 -->
      <el-dialog v-dialogDrag title="调额" :visible.sync="visible" width="40%" :close-on-click-modal = "false">
         <el-form
          :model="limit"
          status-icon
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item label="机构名称">
                <el-input type="text" disabled="disabled" style="width:80%;" v-model.trim="limit.name" autocomplete="off">{{limit.name}}</el-input>
          </el-form-item>
           <el-form-item label="当前总限额">
                <el-input type="text" disabled="disabled" style="width:80%;" v-model.trim="limit.num" autocomplete="off">{{limit.num}}</el-input>
          </el-form-item>
          <el-form-item label="调额方式">
          <el-select
            class="servicelevels"
            v-model="limit.type"
            placeholder="选择调额方式"
          >
            <el-option  label="上调" :value="0"></el-option>
            <el-option  label="下调" :value="1"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="调整额度">
                <el-input type="text" style="width:80%;" v-model.trim="limit.val" autocomplete="off">{{limit.val}}</el-input>
          </el-form-item>
        </el-form>
         <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="configLimit">确定</el-button>
      </span>
      </el-dialog>
  </div>
</template>

<script>

import {instid,chargeOrderPage,getLimitNum,configLimit} from "@/api/api";
import Schart from 'vue-schart';
export default {
  data () {
    return {
        canvasId: 'myChart',
        type: 'pic',
        width: 100,
        height: 100,
        loading:true,
        rechargearr:'',
        data: [
            {name: '当前可用额度', value: 0},
            {name: '已使用额度', value: 0},
        ],
         options: {
                bgColor: '#fff',
                titleColor: '#000',
                legendColor: '#000',
                
            },
        limit:{
          type:0
        },
        visible:false,
        id: sessionStorage.getItem('institutionsid'),
        datainfo:'',
        combined:0,
        cur_page: 1,
        chargeOrderPagelist:[]
    };
  },
components:{
    Schart
},
created() {
    this.instid()
   
  },
  methods:{
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
     // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.chargeOrderPage()
       this.$nextTick(() => {
         document.querySelectorAll('.content')[0].scrollTop = '0'
      });
    },
      // 分页数量
    sizechange(val){
      this.cur_size = val
      this.chargeOrderPage()
       
       this.$nextTick(() => {
         document.querySelectorAll('.content')[0].scrollTop = '0'
      });
       
    },
     // 充值列表
     chargeOrderPage(){
      chargeOrderPage({
         instNo:this.datainfo.instNo,
         page: this.cur_page,
         size:this.cur_size,
        }).then(res => {
          console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else if(res.code == 200){
            this.loading = false
            this.chargeOrderPagelist = res.data
             this.combined = res.pageInfo.recordCount;
          }
        });
    },
    // 调整机构额度
    configLimit(){
      let configNums 
      if(this.limit.type == '0'){
        configNums = '+'+ this.limit.val
      }else if(this.limit.type == '1'){
         configNums = '-'+ this.limit.val
      }
       configLimit({
         instNo:this.datainfo.instNo,
         configNum: configNums
        }).then(res => {
          console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else if(res.code == 200){
            this.limit.val = ''
            this.instid()
            this.visible = false
            this.$message({
                message: '调额成功',
                type: 'success'
              });
          }else{
             this.$message.error(res.message);
          }
        });
    },
    // 查询额度
    instid(){
      instid({},this.id).then(res => {
      let that = this
        console.log(res);
        if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
        }else if(res.code == 200){
          this.datainfo = res.data
          this.data = []
          this.data.push({value:Number(res.data.sub_limit),name:'当前可用额度'})
          this.data.push({value:Number(res.data.trade_limit),name:'已使用额度'})
          console.log(res.data.sub_limit,res.data.trade_limit)
          this.chargeOrderPage()   
          this.limit.name = res.data.instName
          this.limit.num = res.data.all_limit
        }
    });
    }
     
  }
}

</script>
<style lang='less' scoped>
.box{
    width: 100%;
    .title {
        background: #fff;
        padding: 10px;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
    }
    .container {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        box-sizing: border-box;
        }
        .container .itemBox {
        width: 50%;
        }
        .container .itemBox .line {
        width: 100%;
        display: flex;
        font-size: 14px;
        line-height: 200%;
        }
        .container .itemBox .line div:nth-child(1) {
        width: 20%;
        text-align: left;
        }
        .container .itemBox .line div:nth-child(2) {
        width: 80%;
        text-align: left;
        color: #888888;
    }   
}
.bar{
    width: 50%;
    height: 250px;
    .pic{
        width: 100%;
        height: 250px;
    }
}
.allbox{
    line-height: 250%;
}
.tableBox{
    width: 100%;
    background: #fff;
  }
  .servicelevels{
      width: 80%;
  }
</style>